﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Editor</title>
    <style type="text/css" media="screen">
        body {
            overflow: hidden;
        }

        #editor {
            margin: 0;
            position: relative;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #editor, #editor1, #editor2 {
            width:600px;
            height:300px;
        }
    </style>
</head>
<body>

    <h2>Changes</h2>

    <pre id="editor">
function foo(items) {
    var i;
    for (i = 0; i &lt; items.length; i++) {
        alert("Ace Rocks " + items[i]);
    }
}
</pre>

    <hr />
    <div id="editor1">some text</div>
    <hr />
    <div id="editor2">some text</div>


    <script src="/Scripts/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/chrome");
        editor.getSession().setMode("ace/mode/javascript");


        var editor1 = ace.edit("editor1");
        var editor2 = ace.edit("editor2");


        editor1.setTheme("ace/theme/eclipse");
        editor1.getSession().setMode("ace/mode/text");
        editor1.setShowPrintMargin(false);
        editor1.setHighlightActiveLine(true);
        editor1.resize();
        editor1.setBehavioursEnabled(true);
        editor1.getSession().setUseWrapMode(true);
        document.getElementById('editor1').style.fontSize = '1.6em';

        editor2.setTheme("ace/theme/eclipse");
        editor2.getSession().setMode("ace/mode/markdown");
        editor2.setShowPrintMargin(false);
        editor2.setHighlightActiveLine(true);
        editor2.resize();
        editor2.setBehavioursEnabled(true);
        editor2.getSession().setUseWrapMode(true);
        document.getElementById('editor2').style.fontSize = '14px';
        
    </script>

</body>
</html>